import {
  AfterViewInit,
  Component,
  ElementRef,
  inject,
  Input,
  OnChanges,
  OnInit,
  SimpleChanges,
  ViewChild
} from '@angular/core';
import {Svg, SVG, G} from '@svgdotjs/svg.js';
import '@svgdotjs/svg.panzoom.js';
import {EnaTerminalList, EnaTerminalList2, VirtualLoopData} from '../../models/svgdata';
import {LoopdataService} from '../../services/loopdata.service';
import {DrawGraphService} from '../tools/draw-graph.service';
import {drawConfigType} from '../types/draw-config.type';

@Component({
  selector: 'app-svg-graph',
  standalone: false,
  templateUrl: './svg-graph.component.html',
  styleUrl: './svg-graph.component.css'
})
export class SvgGraphComponent implements AfterViewInit, OnInit, OnChanges {
  @Input() dataType!: number;
  private data!: VirtualLoopData;
  @ViewChild('graphContainer', { static: true }) graphContainer!: ElementRef;
  private loopDataService = inject(LoopdataService);
  private drawGraphService = inject(DrawGraphService);

  private drawSvg: Svg | null = null;

  private canvasSize: {width: number; height: number} = {width: 1015, height: 0};
  private moduleSize : {width: number; height: number} = {width: 220, height: 0};

  // private isDragging = false;
  // private scale = 1;
  // private translateX = 0;
  // private translateY = 0;
  // private lastMouseX = 0;
  // private lastMouseY = 0;

  private drawDefaultConfig: drawConfigType = {
    baseDrawConfig: {
      moduleDistance: 700,
      font: {
        small: 8,
        normal: 11,
      },
      color: {
        primary: '#00367a',
        moduleBorderColor: '#27cef7',
        accent: '#25ccf7',
        text: '#ffffff',
        dashedLine: '#000000',
      }
    },
    loopBranchConfig: {
      lineColor: '#25ccf7',
      textColor: '#ffffff',
      textSize: 8,
      lineDistance: 700,
    }
  }


  private drawProps = {
    drawConfig: this.drawDefaultConfig,
    moduleSize: this.moduleSize
  }

  ngOnInit(){
    this.loadData(this.dataType)
  }

  ngAfterViewInit() {
    // this.initializeEventListeners();
    // this.initializePanzoom()
  }

  ngOnChanges(changes: SimpleChanges){
    this.loadData(changes['dataType'].currentValue);
  }


  private renderGraph() {
    // if (this.canvasSize) {
    //   this.graphContainer.nativeElement.style.width = this.canvasSize.width + 'px';
    //   this.graphContainer.nativeElement.style.height = this.canvasSize.height + 'px';
    // }
    if (this.data && this.graphContainer) {
      this.graphContainer.nativeElement.innerHTML = '';
      this.drawSvg = SVG().addTo(this.graphContainer.nativeElement).size('100%', '100%').viewbox(0, 0, this.canvasSize.width, this.canvasSize.height);
      const drawGroup = this.drawSvg.group()
      drawGroup.rect(this.canvasSize.width, this.canvasSize.height).fill('#070a0a');
      this.drawGraphService.render(drawGroup, this.data, this.drawProps)
      this.initializePanzoom()
      // this.render(draw, this.data);
    }
  }

  loadData(dataType: number) {
    this.loopDataService.getLoopData(dataType).subscribe({
      next: (data) => {
        this.data = data;
        this.moduleSize.height = this.drawGraphService.heightCompute(data);
        this.canvasSize.height = this.moduleSize.height + 100;
        this.drawProps.moduleSize = this.moduleSize;
        console.time('svg render')
        this.renderGraph();
        console.timeEnd('svg render');
      },
      error: (err) => {
        console.error('数据加载失败',err);
      }
    })
  }

  private initializePanzoom() {
    if (this.drawSvg) {
      this.drawSvg.zoom(1);
      this.drawSvg.panZoom({
        panning: true,          // 启用拖拽
        wheelZoom: true,        // 启用滚轮缩放
        zoomMin: 0.1,          // 最小缩放比例
        zoomMax: 3,            // 最大缩放比例
        zoomFactor: 0.05,       // 缩放步长
      })
    }
  }


  // private initializeEventListeners(){
  //   const container = this.graphContainer.nativeElement;
  //   const canvasContainer = container.parentElement;
  //
  //   container.addEventListener('wheel', (event: WheelEvent) => {
  //     event.preventDefault();
  //     this.handleWheel(event);
  //   });
  //
  //   canvasContainer.addEventListener('mousedown', (event: MouseEvent) => {
  //     this.handleMouseDown(event);
  //   });
  //
  //   document.addEventListener('mousemove', (event: MouseEvent) => {
  //     this.handleMouseMove(event);
  //   });
  //
  //   document.addEventListener('mouseup', () => {
  //     this.handleMouseUp();
  //   });
  // }
  //
  // private handleWheel(event: WheelEvent) {
  //   const delta = event.deltaY > 0 ? -0.05 : 0.05;
  //   console.log('delta', delta);
  //   this.scale = Math.max(0.1, Math.min(3, this.scale + delta));
  //   this.updateTransform();
  // }
  //
  // private handleMouseDown(event: MouseEvent): void {
  //   this.isDragging = true;
  //   this.lastMouseX = event.clientX;
  //   this.lastMouseY = event.clientY;
  //   event.preventDefault();
  // }
  //
  // private handleMouseMove(event: MouseEvent): void {
  //   if (!this.isDragging) return;
  //
  //   const deltaX = event.clientX - this.lastMouseX;
  //   const deltaY = event.clientY - this.lastMouseY;
  //
  //   this.translateX += deltaX;
  //   this.translateY += deltaY;
  //
  //   this.lastMouseX = event.clientX;
  //   this.lastMouseY = event.clientY;
  //
  //   this.updateTransform();
  // }
  //
  // private handleMouseUp() {
  //   this.isDragging = false;
  // }
  //
  // private updateTransform() {
  //   const container = this.graphContainer.nativeElement;
  //   container.style.transform = `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`;
  // }

}
